<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			*{padding: 0px;margin: 0px;}
			html{height: 100%}
			body{height: 100%}

			.bigbox{width: 100%;
				   height: 100%;
				    /*background: #eee;*/
			        
			        position: relative;
				  perspective-origin:50% 20%;
			        transform-style: preserve-3d;
      		        perspective:500px; 
			        
			        }
      		
      		.smallbox{width: 100px;
      			   height:100px;
      		          
      		          border:1px red solid;
                            transform-style: preserve-3d;
      		          
      		          position: absolute;
      		          left: 0;
      		          right: 0;
      		          bottom: 0;
      		          top: 0;
      		          margin: auto auto;
      		          transform-style: preserve-3d;

      		          /*perspective: 1000px;
      		          prspective-origin: 50% 50%;*/
      		        animation:xuanzhuan 5s infinite linear;

      		        
      		        

      		          }
      		  @keyframes xuanzhuan{
      		  	         0%{transform:rotateY(0deg) }
      		  	         100%{transform:rotateY(360deg)}
      		  	     }

      		.smallbox div{width: 100px;
      		              height: 100px;
      		              border: 1px solid black;
      		              background:rgba(144,144,144,0.5);
      		              position: absolute;
                                
      		              text-align: center;
      		              line-height: 100px;
                                animation: xuanzhuanz 10s;
                               }


      		           

      		.box1{transform: rotateY(30deg) translateZ(250px);
                        }

      		.box2{transform: rotateY(60deg) translateZ(250px);}
      		.box3{transform: rotateY(90deg) translateZ(250px);
                       }
      		.box4{transform: rotateY(120deg) translateZ(250px);
                      }
      		.box5{transform: rotateY(150deg) translateZ(250px);
                        }
      		.box6{transform: rotateY(180deg) translateZ(250px);
                          }
      		.box7{transform: rotateY(210deg) translateZ(250px);
                         }
      		.box8{transform: rotateY(240deg) translateZ(250px);
                         }
      		.box9{transform: rotateY(270deg) translateZ(250px);
                         }
      		.box10{transform: rotateY(300deg) translateZ(250px);
                         }
      		.box11{transform: rotateY(330deg) translateZ(250px);
                         }
      		.box12{transform: rotateY(360deg) translateZ(250px);
}
                
                 /* @keyframes xuanzhuanz{0%{transform: translatez(50px);} 
                                        100% {transform: translatez(300px); }
                  
                  

		</style>
	</head>
    
	<body>
		<div class="bigbox">
			<div class="smallbox">
				<div class="box1">box1</div>
				<div class="box2">box2</div>
				<div class="box3">box3</div>
				<div class="box4">box4</div>
				<div class="box5">box5</div>
				<div class="box6">box6</div>
				<div class="box7">box7</div>
				<div class="box8">box8</div>
				<div class="box9">box9</div>
				<div class="box10">box10</div>
				<div class="box11">box11</div>
				<div class="box12">box12</div>
			</div>
		</div>
	</body>
</html>